<template>
  <banner
    title="中酒云云网解决方案"
    bannerImg="client/solution/detialsBanner.png"
    :isTrue="true"
  />
  <h1 class="all-detials">全部解决方案</h1>
  <div class="detials-content">
    <div class="left">
      <div
        v-for="(item, index) in typeList"
        :key="index"
        class="left-item"
        :class="{ active: parentId == item.solutionId }"
        :title="item.solutionName"
        @click="handleNodeClick(item)"
      >
        <div>
          {{ item.solutionName || "无" }}
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-content">
        <el-tabs v-model="currentSolution">
          <el-tab-pane
            :label="item.solutionName"
            v-for="(item,index) in detialList"
            :key="item.solutionId"
            :name="index"
          >
            <div class="detial-item">
              <h3 class="detials-title">{{ item.solutionName || "无" }}</h3>
              <div v-html="item.content" class="detials-msg"></div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import banner from "./banner/banner.vue";
import { onMounted, ref, watch } from "vue";
import { solutionDetials, solutionTypeLiist } from "@/api/solution/solution";
import { useRoute } from "vue-router";
const route = useRoute();

const parentId = ref<any>(""); //查询详情接口参数
const typeList = ref<any>([]); //详情类型列表
const detialList = ref<any>([]); //详情列表
const currentSolution = ref(0);//当前选中的解决方案

onMounted(() => {
  parentId.value = route.query.parentId;
  getDetials();
  getSolutionTypeLiist();
});

watch(route, (val) => {
  parentId.value = val.query.parentId;
  getDetials();
  getSolutionTypeLiist();
});

//获取详情列表
const getDetials = () => {
  solutionDetials(parentId.value).then((res: any) => {
    if (200 == res.code) {
      detialList.value = res.data;
    }
  });
};

//获取详情类型
const getSolutionTypeLiist = () => {
  solutionTypeLiist().then((res: any) => {
    if (200 == res.code) {
      let index = <any>findById(res.data, parentId.value);
      if (index != -1) {
        typeList.value = res.data[index]?.children;
      }
    }
  });
};

//切换类型
const handleNodeClick = (item: any) => {
  parentId.value = item.solutionId;
  getDetials();
  currentSolution.value = 0;
};

// 根据ID查找所在位置
const findById = (data: any[], solutionId: string) => {
  for (let i = 0; i < data.length; i++) {
    let children = data[i].children;
    let exist = children.find((a: any) => a.solutionId == solutionId);
    if (exist) return i
  }
};
</script>

<style scoped lang="less">
.all-detials {
  text-align: center;
  margin-top: 30px;
}

.detials-content {
  width: 80vw;
  display: flex;
  min-height: 600px;
  margin: 50px auto;

  .left {
    width: 250px;
    border: 2px solid #fff;
    background: linear-gradient(180deg, #f5f7fa 0%, #fff 100%);
    .left-item {
      margin-top: 20px;
      height: 42px;
      font-weight: 600;
      line-height: 42px;
      text-align: right;
      padding: 0 17px;
      > div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &:hover {
        cursor: pointer;
        background: linear-gradient(270deg, #fff 20.83%, rgba(255, 255, 255, 0) 100%);
      }
    }
    .active {
      position: relative;
      color: #4098ff;
      background: linear-gradient(270deg, #fff 20.83%, rgba(255, 255, 255, 0) 100%);
      &::after {
        content: "";
        position: absolute;
        right: -2px;
        top: 0;
        width: 2px;
        height: 42px;
        background-color: #4098ff;
      }
    }
  }

  .right {
    width: 70%;
    background: linear-gradient(180deg, #f3f5f9 0%, #f5f7f9 57.29%, #fefeff 100%);
    box-shadow: 0px 6px 20px 0px #e3e8f0 inset, 6px 0px 10px 0px #e3e8f0 inset;

    .detial-item {
      margin: 20px 40px;
      padding: 20px;
      border-radius: 5px;
      border: 2px solid #fff;
      background: linear-gradient(180deg, #f5f7fa 0%, #fff 100%);
      box-shadow: 5px -5px 20px 0px #fff, -5px 5px 20px 0px #e3e8f0;

      .detials-title {
        margin-bottom: 5px;
        font-size: 18px;
      }

      .detials-msg {
        font-size: 14px;
      }
    }
  }
}
:deep(.el-tabs__nav-scroll) {
  background: linear-gradient(180deg, #f5f7fa 0%, #f5f7fa 100%);
  padding-left: 30px;
}
</style>
